<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html   xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:rich="http://richfaces.org/rich"
        xmlns:f="http://xmlns.jcp.org/jsf/core"
        xmlns:a4j="http://richfaces.org/a4j">
    
    <ui:composition template="template.xhtml">
        <ui:define name="title">
            <h:outputText value="ABC Web - Members"/>
        </ui:define>
        
        <ui:define name="header">
            <ui:include src="top.xhtml"/>
        </ui:define>
        
        <ui:define name="content">
            <h:panelGrid width="100%">
                <rich:panel header="Details">
                    <h:panelGrid columns="2">
                        <h:outputText value="Country:"/>
                        <h:form>
                            <h:selectOneMenu value="#{membersService.currentCountryId}" valueChangeListener="#{membersService.valueChangedCountry}">
                                <f:selectItems value="#{membersService.countries}" />
                                <a4j:ajax event="valueChange" render="city" execute="@this" />
                            </h:selectOneMenu>
                        </h:form>
                        <h:outputText value="City:"/>
                        <h:form>
                            <a4j:outputPanel id="city" layout="block">
                                <h:selectOneMenu value="#{membersService.currentCityId}">
                                    <f:selectItems value="#{membersService.cities}" />
                                </h:selectOneMenu>
                            </a4j:outputPanel>
                        </h:form>
                        <h:outputText value="Coords:"/>
                        <h:panelGrid columns="2">
                            <h:outputText value="Longitude:"/>
                            <h:inputText/>
                            <h:outputText value="Latitude:"/>
                            <h:inputText/>
                        </h:panelGrid>
                        <h:outputText value="Creation:"/>
                        <rich:calendar datePattern="yyyy-MM-dd"/>
                        <h:outputText value="Modification:"/>
                        <rich:calendar datePattern="yyyy-MM-dd"/>
                    </h:panelGrid>
                </rich:panel>
                <rich:editor toolbar="full"/>
            </h:panelGrid>
        </ui:define>
    </ui:composition>
</html>